﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合分析--监管行为分析</title>
    <script src="../js/header.js"></script>
    <style>
        #piechart1,
        #piechart2,
        #piechart3,
        #piechart4{
            /*width:800px;*/
            width: 100%;
            /*height: 300px;*/
            height: 248px;
            margin: 0px auto;
        }
        .el-carousel__container{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <el-row style="border-top: 3px solid #0D9AFF;border-bottom: 1px solid #F3F3F3;margin-bottom: 10px;">
        <el-col :span="2" class="tab-title" style="margin-left: 15px;border-left: 4px solid #0D9AFF;line-height: 1em;">
            <span style="vertical-align: middle;">数据统计</span>
        </el-col>
        <el-col :span="10" style="margin-top: 7px;">
            <span>年度:</span>
            <el-date-picker
                    v-model="fileYear"
                    type="year"
                    size="mini"
                    placeholder="请选择"
                    format="yyyy"
                    value-format="yyyy"
                    style="width: 180px;"
                    @change="changeYear">
            </el-date-picker>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="overflow: hidden;margin: 0;">
        <el-col :span="12" class="echarts_wrap">
            <el-row style="border-bottom: 1px solid #ddd;">
                <el-col class="tab-title">
                    <img src="../images/quyusaomiao.png" style="vertical-align: middle;" />
                    <span style="vertical-align: middle;">区域监管行为统计</span>
                </el-col>
            </el-row>
            <el-row>
                <!--<el-col style="height: 748px;">-->
                <el-col style="height: 696px;">
                    <div id="main"></div>
                </el-col>
            </el-row>
        </el-col>
        <!--<el-col :span="12" style="padding-right: 0;height: 748px;">-->
        <el-col :span="12" style="padding-right: 0;height: 696px;">
            <el-row>
                <el-col class="echarts_wrap">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/ico_xinyon.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">监管行为总览</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col style="height: 364px;">-->
                        <el-col style="height: 338px;">
                            <div id="barchart"></div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="echarts_wrap" style="margin-top: 10px;">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/tongji.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">监管行为统计</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--<el-col id="echartswrap" style="height: 364px;">
                            <el-carousel trigger="click" interval="3000" height="364px">-->
                        <el-col id="echartswrap" style="height: 338px;">
                            <el-carousel trigger="click" interval="3000" height="338px">
                                <el-carousel-item v-for="item in 4" :key="item">
                                    <div :id="'piechart' + item"></div>
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-dialog
            title=""
            :visible.sync="dialogTableVisible"
            center="true"
            width="45%">
        <div>
            <el-row>
                <el-col style="height: 30px;text-align: center;">{{ city.cityName }}</el-col>
                <el-col >
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">总数</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ city.cityCounts }}</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">占全国比例</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">{{ (city.cityCounts / cityTotal * 100) | numFilter  }}%</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var UIEcharts = new Vue({
        el: '#app',
        data(){
            return{
                // setHeight: `$(document.documentElement.clientHeight)`
                /*setHeight: window.innerHeight + 'px',
                setHeight2: (window.innerHeight)/2 - 57 + 'px'*/
                dialogTableVisible: false,
                city: {
                    cityName: '',
                    cityCounts: ''
                },
                cityTotal: '',
                // 饼状图宽搞获取
                initWidth: '',
                initHeight: '',
                fileYear: ''
            }
        },
        filters: {
            numFilter (value) {
                // 截取当前数据到小数点后两位
                let realVal = parseFloat(value).toFixed(2)
                return realVal
            }
        },
        mounted() {
            let date=new Date();
            let year=date.getFullYear().toString();
            this.fileYear=year;
            this.calculateEcharts(); // 获取宽高
            this.mapFn();
            this.barChart();
            this.pieChart();
            this.handleListener(); // 浏览器缩放监听事件



            // this.$refs.nav.style.height=this.winHeight+'px'
        },
        methods: {
            mapFn() {
                var dataList;
                var myChart = echarts.init(document.getElementById('main'));
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/havior/countyear',
                    params:{
                        year:$this.fileYear
                    }
                })
                .then(response => {
                    let data = response.data;
                    if(data.code == 200) {
                        dataList=JSON.parse(data.data);
                        $this.cityTotal=JSON.parse(data.cityTotal);

                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: function(params) {
                                    if(params.value){
                                        return params.seriesName + '<br/>' + params.name + ' : ' + params.value;
                                    }else{
                                        return params.seriesName + '<br/>' + params.name + ' : ' + '0';
                                    }
                                } //数据格式化
                            },
                            visualMap: {
                                min: 0,
                                max: 1500,
                                left: 'left',
                                top: 'bottom',
                                text: ['高', '低'], //取值范围的文字
                                inRange: {
                                    color: ['#e0ffff', '#006edd'] //取值范围的颜色
                                },
                                show: false //图注
                            },
                            geo: {
                                map: 'china',
                                roam: false, //不开启缩放和平移
                                zoom: 1.23, //视角缩放比例
                                label: {
                                    normal: {
                                        show: true,
                                        fontSize: '10',
                                        color: 'rgba(0,0,0,0.7)'
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        borderColor: 'rgba(0, 0, 0, 0.2)'
                                    },
                                    emphasis: {
                                        areaColor: '#F3B329', //鼠标选择区域颜色
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            series: [{
                                name: '监管行为分析数量',
                                type: 'map',
                                geoIndex: 0,
                                data: dataList
                            }]
                        };
                        myChart.setOption(option);

                        myChart.resize();
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

                // 地图点击事件
                myChart.on('click', function (params) {
                    $this.dialogTableVisible = true;
                    $this.city.cityName = params.name;
                    if(params.value){
                        $this.city.cityCounts = params.value;
                    }else{
                        $this.city.cityCounts = 0;
                    }
                });
            },
            barChart() {
                var dataCheck,dataPunish,dataForce,dataOther;

                option = {
                    /*title: {
                        text: '世界人口总量',
                        subtext: '数据来自网络'
                    },*/
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        left: 'center',
                        data: ['行政强制行为信息', '行政检查行为信息','行政处罚行为信息','其他行为信息']
                    },
                    grid: {
                        left: '5%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: true,
                        type: 'category',
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局'],
                        name: '各局名称',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        show: true,
                        type: 'value',
                        name: '数值'
                        /* //隐藏刻度尺
                        axisTick: {
                            show: false
                        }, */
                        //隐藏坐标线
                        /* axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#000000'
                            }
                        }, */
                    },
                    series: [
	                    {
	                        // name: '行政强制行为信息',
	                        type: 'bar',
	                        itemStyle: {
	                            borderWidth: {},
	                            normal: {
	                                //控制柱状图颜色
	                                color: '#C1232B'
	
	                            },
	                        }
	                        // data: [18203, 23489, 29034, 104970, 131744, 630230]
	                    },
	                    {
	                        // name: '行政检查行为信息',
	                        type: 'bar',
	                        itemStyle: {
	                            borderWidth: {},
	                            normal: {
	                                //控制柱状图颜色
	                                color: '#B5C334'
	
	                            },
	                        }
	                        // data: [13203, 21489, 23034, 104170, 135744, 670230]
	                    },
	                    {
	                        // name: '行政处罚行为信息',
	                        type: 'bar',
	                        itemStyle: {
	                            borderWidth: {},
	                            normal: {
	                                //控制柱状图颜色
	                                color: '#FCCE10'
	
	                            },
	                        }
	                        // data: [12203, 22489, 22034, 104270, 131144, 660230]
	                    },
	                    {
	                        // name: '其他行为信息',
	                        type: 'bar',
	                        itemStyle: {
	                            borderWidth: {},
	                            normal: {
	                                //控制柱状图颜色
	                                color: '#E87C25'
	
	                            },
	                        }
	                        // data: [11203, 25489, 21034, 104270, 131044, 130230]
	                    }
                    ]
                };
                var barChart = echarts.init(document.getElementById('barchart'));
                barChart.setOption(option);
                var $this = this;
                axios({
                    method: 'get',
                    url: appBaseUrl + '/havior/getbaryear',
                    params:{
                        year:$this.fileYear
                    }
                }).then(response=>{
                    let data=response.data;
                    if(data.code == 200){
                        dataCheck = JSON.parse(data.dataCheck);
                        dataPunish = JSON.parse(data.dataPunish);
                        dataForce = JSON.parse(data.dataForce);
                        dataOther = JSON.parse(data.dataOther);

                        var dac = [],dap = [],daf = [],dao = [],xlist = [];
                        dataCheck.forEach(function(item,index){
                            dac.push(item.value);
                            xlist.push(item.name);
                        })
                        dataPunish.forEach(function(item,index){
                            dap.push(item.value);
                        })
                        dataForce.forEach(function(item,index){
                            daf.push(item.value);
                        })
                        dataOther.forEach(function(item,index){
                            dao.push(item.value);
                        })


                        barChart.setOption({
                            xAxis: {
                                data: xlist
                            },
                            series: [
                                {
                                    name: '行政强制行为信息',
                                    data: daf
                                },
                                {
                                    name: '行政检查行为信息',
                                    data: dac
                                },
                                {
                                    name: '行政处罚行为信息',
                                    data: dap
                                },
                                {
                                    name: '其他行为信息',
                                    data: dao
                                }
                            ]
                        });
                    }
                })

                barChart.resize();
            },
            pieChart() {
                option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    /* 	grid: {
                            top: '10%', //距上边距
                            left: '10%', //距离左边距
                            right: '10%', //距离右边距
                            bottom: '10%', //距离下边距
                            containLabel: true
                        }, */
                    legend: {
                        orient: 'vertical',
                        y: 50,
                        left: 100,
                        // data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']
                    },
                    series: [
                        {
                            // name: '行政强制行为信息',
                            type: 'pie',
                            selectedMode: 'single',
                            radius: '60%',
                            center: ['50%', '40%'],
                            label: {
                                normal: {
                                    show: 'false',
                                    position: 'inside',
                                    formatter: '{d}%'
                                }
                            },
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal:{
                                    color:function(params) {
                                        //自定义颜色
                                        var colorList = [
                                            '#FACC14', '#223273', '#8543E0', '#1890FF', '#2FC25B','#00fffe'
                                        ];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }
                    ]
                };

                var pieChart1 = echarts.init(document.getElementById('piechart1'));
                var pieChart2 = echarts.init(document.getElementById('piechart2'));
                var pieChart3 = echarts.init(document.getElementById('piechart3'));
                var pieChart4 = echarts.init(document.getElementById('piechart4'));
                // pieChart1.showLoading(); // 数据加载完之前先显示一段简单的loading动画
                var $this = this;

                pieChart1.setOption(option);
                pieChart2.setOption(option);
                pieChart3.setOption(option);
                pieChart4.setOption(option);

                axios({
                    method: 'get',
                    url: appBaseUrl + '/havior/pieyear',
                    params:{
                        year:$this.fileYear
                    }
                })
                .then(response => {
                    let data = response.data;

                    if(data.code == 200) {
                        var dataList1 = JSON.parse(data.dataForce);
                        var dataList2 = JSON.parse(data.dataCheck);
                        var dataList3 = JSON.parse(data.dataPunish);
                        var dataList4 = JSON.parse(data.dataOther);
                        // pieChart1.hideLoading(); // 隐藏加载动画
                        pieChart1.setOption({
                            title: {
                                text: '行政强制行为信息',
                                left: 'center',
                                top: 10
                            },
                            series: [{
                                name: '行政强制行为信息',
                                data: dataList1, // 数据
                            }]
                        })
                        pieChart2.setOption({
                            title: {
                                text: '行政检查行为信息',
                                left: 'center',
                                top: 10
                            },
                            series: [{
                                name: '行政检查行为信息',
                                data: dataList2, // 数据
                            }]
                        })
                        pieChart3.setOption({
                            title: {
                                text: '行政处罚行为信息',
                                left: 'center',
                                top: 10
                            },
                            series: [{
                                name: '行政处罚行为信息',
                                data: dataList3, // 数据
                            }]
                        })
                        pieChart4.setOption({
                            title: {
                                text: '其他行为信息',
                                left: 'center',
                                top: 10
                            },
                            series: [{
                                name: '其他行为信息',
                                data: dataList4, // 数据
                            }]
                        })
                    } else {
                        this.$message.error(data.msg);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });

                let resize = {
                    width: $this.initWidth,
                    height: $this.initHeight
                };

                pieChart1.resize(resize);
                pieChart2.resize(resize);
                pieChart3.resize(resize);
                pieChart4.resize(resize);
            },
            //重新计算echarts的宽度
            calculateEcharts() {
                //获取这个组件的窗口宽度
                this.initWidth = document.getElementById('echartswrap').offsetWidth;
                this.initHeight = document.getElementById('echartswrap').offsetHeight;
            },
            changeYear() {
                this.mapFn();
                this.barChart();
                this.pieChart();
                /* return mapFn(); */
            },
            //监听窗口变化
            handleListener() {
                // 调用renderChart方法对图表进行重新渲染
                window.addEventListener('resize', this.calculateEcharts);
                window.addEventListener('resize', this.mapFn);
                window.addEventListener('resize', this.barChart);
                window.addEventListener('resize', this.pieChart);
            }
        }
    })
</script>
</html>
